<template>
  <!-- 列设置 -->
  <a-dropdown placement="bottomRight" :trigger="['click']" :visible="visible">
    <cps-button
      class="mr10"
      icon="menu"
      :style="buttonStyle"
      :type="type"
      size="small"
      ghost
      @click.prevent="open"
      >列设置</cps-button
    >
    <template #overlay>
      <div class="ant-dropdown-menu" @click.stop>
        <header>列设置</header>
        <ul v-if="freezeFields">
          <li
            :key="element.key"
            class="columnItem cp df unmover"
            v-for="(element, index) in freezeFields"
          >
            <div class="df aic w100p">
              <BarsOutlined class="mr6" style="margin-top: 3px" />
              <a-checkbox
                :checked="element.isSelected === 1"
                :disabled="
                  element.isMustSelected === 1 || element?.freeze === 1
                "
                @change="onChange(element)"
              />
              <span class="ml6 fg1 fs1 f1">{{ element.columnName }}</span>
              <span
                class="rowFixed"
                v-if="freezeFields.length - 1 === index"
                @click="handlerFreeze(-1)"
                >取消冻结</span
              >
            </div>
          </li>
        </ul>
        <draggable
          v-model="menuListFields"
          item-key="index"
          tag="ul"
          filter=".unmover"
          draggable=".columnItem"
          @end="onDragEnd"
        >
          <template #item="{ element, index }">
            <li
              v-if="element.freeze !== 1"
              :key="element.key"
              class="columnItem cp"
            >
              <div
                v-if="!element.childrenList || !element.childrenList.length"
                class="df cp w100p"
              >
                <BarsOutlined class="mr6" style="margin-top: 3px" />
                <a-checkbox
                  :checked="element.isSelected === 1"
                  :disabled="element.isMustSelected === 1"
                  @change="onChange(element)"
                />
                <span class="ml6 fg1 fs1 f1">{{ element.columnName }}</span>
                <span
                  class="rowFixed"
                  v-if="element.freeze !== 1"
                  @click="handlerFreeze(index)"
                  >冻结至此</span
                >
              </div>
              <SubColumnSetting
                @click="handlerFreeze"
                :data="element"
                :index="index"
                v-else
              ></SubColumnSetting>
            </li>
          </template>
        </draggable>
        <a-row
          type="flex"
          align="middle"
          justify="end"
          style="padding: 4px 10px"
        >
          <a-button class="mr10" type="text" size="small" @click="open">
            取消
          </a-button>
          <a-button type="primary" size="small" @click="onConfirm">
            确定
          </a-button>
        </a-row>
      </div>
    </template>
  </a-dropdown>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { BarsOutlined } from '@ant-design/icons-vue'
import draggable from 'vuedraggable'
import { config_update_menu_field_post_ } from 'server/apis/1890.js'
import SubColumnSetting from '@/components/business/SubColumnSetting'
const props = defineProps({
  value: {
    type: Array,
    default() {
      return []
    }
  },
  menuName: {
    type: String
  },
  type: {
    type: String,
    default: 'primary'
  },
  buttonStyle: {
    type: Object
  }
})
const emits = defineEmits(['update:value', 'change'])

const menuListFields = ref(props.value)
watch(
  () => props.value,
  val => {
    menuListFields.value = JSON.parse(JSON.stringify(val))
  },
  {
    deep: true,
    immediate: true
  }
)
const freezeFields = computed(() => {
  return menuListFields.value.filter(item => {
    return item.freeze === 1
  })
})
const visible = ref(false)
const open = () => {
  visible.value = !visible.value
}
const onChange = item => {
  if (item.isSelected === 1) {
    item.isSelected = 0
  } else {
    item.isSelected = 1
  }
}
const onDragEnd = evt => {
  evt.preventDefault()
}
// 冻结与取消冻结
const handlerFreeze = index => {
  menuListFields.value.map((item, mIndex) => {
    if (mIndex <= index) {
      item.freeze = 1
    } else {
      item.freeze = 0
    }
  })
}

const onConfirm = () => {
  const list = Object.assign(menuListFields.value)
  list.forEach(item => {
    if (item.childrenList && item.childrenList.length) {
      const hasSelected = item.childrenList.some(item => item.isSelected === 1)
      if (hasSelected) {
        item.isSelected = 1
      } else {
        item.isSelected = 0
      }
    }
  })
  console.log(list, 'list')
  console.log(menuListFields.value, 'menuListFields.value')
  config_update_menu_field_post_(
    {
      menuName: props.menuName,
      beforeFieldPos: list
    },
    () => {
      open()
      emits('update:value', menuListFields.value)
      emits('change', menuListFields.value)
    }
  )
}
</script>
<style lang="scss" scoped>
.ant-dropdown-menu {
  width: 220px;
}
.sortable-ghost {
  background: #e6f7ff;
}
header {
  padding: 3px 12px 7px 12px;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}
ul {
  max-height: 300px;
  overflow-y: scroll;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 0;
  .columnItem {
    padding: 4px 8px !important;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.85);
    &:hover {
      background: #f5f5f5;
      .rowFixed {
        display: block;
      }
    }
    .rowFixed {
      color: #1890ff;
      display: none;
    }
    &.unmover {
      background: #f5f5f5;
    }
  }
}
</style>
